<template>
  <div class="cover">
    <div class="div1">
      <div id="div1_1">
        <el-image
          id="div1_1_el-image"
          :src=imgUrl.imgUrlTX
          fit=fill>
        </el-image>
      </div>
    </div>
    <div class="div2">
      <el-card id="div2-el-card">
        你好！欢迎来到我的作品集网站;<br>
        如果你觉得还不错，欢迎使用下面方式联系我。<br>
        <a href="mailto:3204485075@qq.com">
          <el-image
            class="lx_el-image"
            :src=imgUrl.imgUrlEmil
            fit=fill>
          </el-image>
        </a>
        <a href="https://gitee.com/moli_yk">
          <el-image
            class="lx_el-image"
            :src=imgUrl.imgUrlGitee
            fit=fill>
          </el-image>
        </a>
      </el-card>
    </div>
    <div class="div3">
      <a href="#foot" style="text-decoration:none">
        <el-card id="div3-el-card" style="font-family:'STKaiti';">
          我们的征途是星辰大海！
        </el-card>
      </a>
    </div>
    <div style="height:30px">
    </div>
    <div id="foot"></div>
  </div>
</template>

<script>
import ProjectInformation from '@/model/ProjectInformation'
import imgUrlTX from '../../../public/static/img/TX.jpg'
import imgUrlEmil from '../../../public/static/img/emil.png'
import imgUrlGitee from '../../../public/static/img/gitee.png'

export default {
  name: 'cover',
  components: {
  },
  data() {
      return {
        imgUrl:{
          imgUrlTX:imgUrlTX,
          imgUrlEmil:imgUrlEmil,
          imgUrlGitee:imgUrlGitee
        },
      };
    },
    async mounted() {
    },
    methods : {
    }
  }
</script>

<style>
  .cover{
    /* background-image: url('/static/img/t2.png'); */
    text-align:center;
    margin:0 auto;
    height: 750px;
    width: 50%;
  }
  .div1{
    height: 160px;
    margin:0 auto;
  }
  #div1_1{
    width: 150px;
    height: 150px;
    margin:0 auto;
    margin-top: 70px;
    border-radius: 75px;
  }
  #div1_1_el-image{
    border-radius: 75px;
  }
  .div2{
    height: 250px;
    margin:0 auto;
  }
  #div2-el-card{
    border-radius: 30px;
    opacity: 0.8;
    height: 200px;
    width: 75%;
    margin:25px auto;
  }
  .div3{
    height: 150px;
    margin:0 auto;
  }
  #div3-el-card{
    border-radius: 30px;
    opacity: 0.7;
    /* height: 60px; */
    width: 35%;
    margin:0 auto;
    /* background-color: #85FFBD;
    background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
    border-color: none; */
  }
  .lx_el-image{
    margin: 20px 20px;
    width: 80px;
    height: 80px;
  }
</style>

